<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
    <script src="http://code.createjs.com/easeljs-0.6.1.min.js"></script>
    
    <script>
        var stage;
        (function() {
 
            var Button = function(label) {
                this.initialize(label);
            }
            Button.prototype = new createjs.Container();
            
            Button.prototype.Container_initialize = Button.prototype.initialize;
            Button.prototype.initialize = function(label) {
                this.Container_initialize();
                
                this.label = label;
                this.color = "#CCC";
                this.x = 100;
                
                var text = new createjs.Text(label, "20px Arial", "#000");
                text.textBaseline = "top";
                text.textAlign = "center";
                
                var width = text.getMeasuredWidth()+30;
                var height = text.getMeasuredHeight()+20;
                
                this.background = new createjs.Shape();
                this.background.graphics.beginFill(this.color).drawRoundRect(0,0,width,height,10);
                
                text.x = width/2;
                text.y = 10;
                
                this.addChild(this.background,text); 
                this.addEventListener("click", function() {
                    console.log("click");
                });
                var self = this;
                var dir = 1;
                
                this.addEventListener("tick", function() {
                    self.x += dir * 0.5;
                    
                    if (self.x > 120) {
                        dir = -1;
                    }
                    
                    if (self.x < 100) {
                        dir = 1;
                    }
                    
                });
            }
            
            window.Button = Button;
        }());
        
        (function () {
            var MyCircle = function() {
                this.initialize();
            }
            
            var p = MyCircle.prototype = new createjs.Shape();
            
            p.parent_initialize = p.initialize;
            p.initialize = function() {
                var self = this;
                
                self.parent_initialize();
                
                self.x = 100;
                self.y = 100;
                
                self.radius = 50;
                self.pos = Math.round(Math.sqrt(2) / 2 * self.radius);
                self.count = 0;
                self.dir = 1;
                
                self.mid = (self.pos + self.radius) / 2;
                console.log(self.mid);
                
                self.addEventListener("tick", function() {
                    self.graphics
                        .clear()
                        .beginFill("red")
                        .moveTo(-self.mid, -self.mid)
                        .arcTo(0, -self.mid*1.5, self.mid, -self.mid, self.radius*2)
                        .arcTo(self.mid*1.5, 0, self.mid, self.mid, self.radius*2)
                        .arcTo(0, self.mid*1.5, -self.mid, self.mid, self.radius*2)
                        .arcTo(-self.mid*1.5, 0, -self.mid, -self.mid, self.radius*2)
                    ;
                });
            }
            
            window.MyCircle = MyCircle;
        }());
        
        $(function() {
            stage = new createjs.Stage("mainCanvas");
            stage.addChild(new MyCircle());
            
            createjs.Ticker.useRAF = true;
            createjs.Ticker.setFPS(60);
            createjs.Ticker.addEventListener("tick", function(){stage.update();});
            
            
        });
    </script>
</head>
<body>
    <canvas id="mainCanvas" width="500" height="300">
        Can't handle Canvas.
    </canvas>
</body>
</html>
